import React, { useEffect, useState, Suspense } from 'react'
import { AppstoreOutlined, UserOutlined } from '@ant-design/icons';
import { useLocation, useNavigate, Outlet } from 'react-router-dom'
import { Avatar, Modal, Row, Col, Popover } from 'antd';

import styles from './index.module.css'
import PageLoading from '../../component/pageLoading'


//跳转工具类
import { jumpTo } from '../../jump'

import { itemList } from '../../constant/mainMenu'

import moment from "moment";



function Main03() {


    //导航
    let navigate = useNavigate()
    //获取路由传参
    let location = useLocation()

    const [time, setTIme] = useState('');
    const [week, setWeek] = useState('');
    const [year, setYear] = useState('');

    const [isModalOpen, setIsModalOpen] = useState(false);

    //[]空数组相当于componentDidMount
    useEffect(() => {
        const intervalId = setInterval(function () {
            getCurryTime()
            getWeek()
            getYear()
        }, 1000 * 1);
        initData()

        return () => {
            clearInterval(intervalId);
        }
    }, []);

    function initData() {
        const argument = location.state;
        if (argument == null) {
            return
        }
        const isLogin = argument.tag
        if (isLogin === '1') {
            jumpTo(navigate, '/main/board', true, null)
        }
    }


    function getCurryTime() {
        const now = moment();
        moment.locale('zh-cn')
        setTIme(now.format('HH:mm:ss'))
    }


    function getWeek() {
        const options = { weekday: 'long' };
        const today = new Date();
        setWeek(today.toLocaleDateString('zh-CN', options))
    }

    function getYear() {
        const now = moment();
        moment.locale('zh-cn')
        setYear(now.format('YYYY年MM月DD日'))
    }

    function clickFunctionMenu() {
        //showMenu(navigate)
        setIsModalOpen(true);
    }

    function handleCancel() {
        setIsModalOpen(false);
    };

    function clickItem(index) {
        setIsModalOpen(false);
        if (index == 1) {
            jumpTo(navigate, '/main/test01', true, null)
        }
        if (index == 0) {
            jumpTo(navigate, '/main/test02', true, null)
        }
        if (index == 2) {
            jumpTo(navigate, '/main/board', true, null)
        }

    }

    function clickUserIcon() {

    }


    const items = [
        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                    1st menu item
                </a>
            ),
        },
        {
            key: '2',
            label: (
                <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                    2nd menu item (disabled)
                </a>
            ),
            icon: <AppstoreOutlined />,
            disabled: true,
        },
        {
            key: '3',
            label: (
                <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
                    3rd menu item (disabled)
                </a>
            ),
            disabled: true,
        },
        {
            key: '4',
            danger: true,
            label: 'a danger item',
        },
    ];

    return (
        <div className={styles.root}>
            <Modal width={'600px'} title="导航栏" closable={true} open={isModalOpen} onCancel={handleCancel} footer={null}>
                <div className={styles.modal_content}>
                    <Row gutter={6}>
                        {itemList.map((item, index) => {
                            return (
                                <Col key={index} span={6}>
                                    <div className={styles.box1} onClick={() => { clickItem(index) }}>
                                        <Avatar shape="square" size={64} src={item.imgSrc}></Avatar>
                                        <span className={styles.item_text}>{item.title}</span>
                                    </div>
                                </Col>
                            );
                        })}
                    </Row>
                </div>
            </Modal>
            <div className={styles.head}>
                <Popover trigger="hover" content={(<div>这是账户信息</div>)}  title="确认退出？">
                    <Avatar shape="square" onClick={clickUserIcon} className={styles.avatar1} icon={<UserOutlined className={styles.func_icon} />} />
                </Popover >
                <Avatar shape="square" onClick={clickFunctionMenu} className={styles.avatar} icon={<AppstoreOutlined className={styles.user_icon} />} />
                <div className={styles.time}>
                    <span className={styles.time1}>{time}</span>
                    <div className={styles.time2}>
                        <span>{week}</span>
                        <span className={styles.time3}>{year}</span>
                    </div>
                </div>
            </div>
            <Suspense fallback={<PageLoading />}>
                <Outlet></Outlet>
            </Suspense>
        </div>

    )
}

export default Main03;
